ScreenSheild: make notification view scrollable

Place a maximum height on the notification view, and show scrollbars
if the list of persistent sources would overflow.

https://bugzilla.gnome.org/show_bug.cgi?id=681143

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6d18bf14051dd1ac0e4b5a818b75fbff4b9476f3..44bf764eb1bdaa7676c1cc342ae95b7aec2b6f92 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -2228,12 +2228,13 @@ StButton.popup-menu-item:insensitive {
 }
 
 #screenShieldNotifications {
-    border-radius: 24px;
+    border-radius: 8px;
     background-color: rgba(0.0, 0.0, 0.0, 0.9);
     border: 2px solid #868686;
+    max-height: 500px;
 }
 
-#screenShieldNotifications, .screen-shield-notifications-box {
+.screen-shield-notifications-box {
     spacing: 8px;
 }
 

diff --git a/js/ui/screenShield.js b/js/ui/screenShield.js
index c65474174850ed7e804ea5e2d7757bb44eb6b440..d254450555ac45b456565e58d18dff5298a83a0f 100644 (file)
--- a/js/ui/screenShield.js
+++ b/js/ui/screenShield.js
@@ -73,16 +73,17 @@ const NotificationsBox = new Lang.Class({
     _init: function() {
         this.actor = new St.BoxLayout({ vertical: true,
                                         name: 'screenShieldNotifications',
-                                        margin_top: 20
-                                      });
+                                        style_class: 'screen-shield-notifications-box' });
 
         this._residentNotificationBox = new St.BoxLayout({ vertical: true,
                                                            style_class: 'screen-shield-notifications-box' });
+        let scrollView = new St.ScrollView({ x_fill: false, x_align: St.Align.MIDDLE });
         this._persistentNotificationBox = new St.BoxLayout({ vertical: true,
                                                              style_class: 'screen-shield-notifications-box' });
+        scrollView.add_actor(this._persistentNotificationBox);
 
         this.actor.add(this._residentNotificationBox, { x_fill: true });
-        this.actor.add(this._persistentNotificationBox, { x_fill: false, x_align: St.Align.MIDDLE });
+        this.actor.add(scrollView, { x_fill: true, x_align: St.Align.MIDDLE });
 
         this._items = [];
         Main.messageTray.getSummaryItems().forEach(Lang.bind(this, function(item) {
@@ -169,7 +170,7 @@ const NotificationsBox = new Lang.Class({
             this._residentNotificationBox.add(item.notificationStackView);
         } else {
             [obj.sourceBox, obj.countLabel] = this._makeNotificationSource(item.source);
-            this._persistentNotificationBox.add(obj.sourceBox);
+            this._persistentNotificationBox.add(obj.sourceBox, { x_fill: false, x_align: St.Align.MIDDLE });
         }
 
         obj.contentUpdatedId = item.connect('content-updated', Lang.bind(this, this._onItemContentUpdated));